<template>
    <div class="mt50">
        <!-- 导航组件 -->
        <van-nav-bar fixed left-arrow @click-left="$router.back()" :title="actionType == 1 ? '新增地址' : '编辑地址'">
            <!-- <template #left>
                <van-icon name="arrow-left" color="red" size="24" />
            </template> -->
        </van-nav-bar>

        <!-- 百度地图 
            center: 设置地图中心点的经纬度
            scroll-wheel-zoom: 是否开启鼠标滚轮缩放地图功能
        -->
        <baidu-map :scroll-wheel-zoom="false" @ready="mapReadyHandler" @click="getPoint" :zoom="mapZoom" :center="mapCenter"
            class="map">
        </baidu-map>

        <!-- 地址编辑组件 -->
        <!-- currentAddress={areaCode:'地区码, 可以自动选中省市区'} -->
        <van-address-edit :show-delete="actionType == 2" @change-detail="changeDetail" :address-info="currentAddress"
            :area-list="areaList" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="remove" />

    </div>
</template>

<script>
import Vue from 'vue';
// 导入百度地图
import BaiduMap from 'vue-baidu-map';
// 导入省市区地区数据
import { areaList } from '@vant/area-data';
// 注册组件
Vue.use(BaiduMap, {
    ak: 'uaFURyS0bbckeBfIDcGFv3K7'
});
export default {
    data() {
        return {
            // 控制地图组件的显示状态
            mapVisible: false,
            // 地图中心点的坐标
            mapCenter: { lng: 116.401969, lat: 39.913385 },
            // 地图的缩放级别
            mapZoom: 12,
            areaList,
            // 地址列表数据
            addressList: [],
            // 待编辑地址对象数据
            currentAddress: {},
            // 操作类型1新增,编辑
            actionType: 1,
            // 待编辑的地址id
            currentId: 0,
            // 保存地图geo对象
            geo: null
        };
    },
    mounted() {
        // 读取本地存储中的地址数据, 
        this.getAddressList();
        if (this.$route.query.id && this.$route.query.id > 0) {
            // 初始化表单数据
            this.initFormData();
        }
    },
    methods: {
        // 选择详细地址
        changeDetail() {
            // 显示百度地图
            this.mapVisible = true;
        },
        getPoint({ point }) {
            // point点击点的经纬度{lng:'',lat:''}
            // 根据经纬度获取地区名称
            // 需要将地图坐标点传入
            this.geo.getLocation(point, (res) => {
                // 获取街道和区县名称
                const { street, district } = res.addressComponents;
                // 派生一个新的对象, 目的是驱动视图更新
                // 同时更新省市区
                // 获取地区码: 选中省市区需要地区码
                const areaCode = this.getAreaCode(district);
                // 更新当前地址
                this.currentAddress = { ...this.currentAddress, areaCode, addressDetail: street };
            });
        },
        mapReadyHandler({ BMap }) {
            // 创建百度地图地址解析器geo对象
            this.geo = new BMap.Geocoder({ extensions_town: true });
            // 创建百度地图Geolocation对象
            const geoLocation = new BMap.Geolocation();
            // 获取当前位置信息(实时定位): 经纬度, 省市区
            geoLocation.getCurrentPosition((currentPos) => {
                // 更新地图中心点位置
                this.mapCenter = currentPos.point;
            });
        },
        // 初始化表单数据
        initFormData() {
            this.currentAddress = { ...this.$route.query }
            this.currentId = this.$route.query.id;
            // 更新操作类型
            this.actionType = 2;
            // 获取地区编码
            this.currentAddress.areaCode = this.getAreaCode(this.currentAddress.county);
        },
        // 根据区县名称获取areaCode
        getAreaCode(county) {
            const [areaCode] = Object.entries(areaList.county_list).find(item => item[1] === county);
            return areaCode;
        },
        remove() {
            this.$axios.post('/addressremove', { id: this.currentId }).then(res => {
                this.$toast(res.msg);
                if (res.code === 200) {
                    this.$router.push({ name: "addressList" });
                    return false;
                }
            });

        },
        // 获取本地存储中的数据
        getAddressList() {
            this.addressList = JSON.parse(localStorage.getItem('addressList') || '[]');
        },
        onSave({ name, tel, province, city, county, addressDetail, isDefault }) {
            const { uid } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
            // 新增地址
            if (this.actionType == 1) {
                this.$axios.post('/addressadd', {
                    uid, status: isDefault, name, tel,
                    province, city, county,
                    addressDetail
                }).then(res => {
                    if (res.code === 200) {
                        this.$toast(res.msg);
                    }
                });
            } else {
                // 编辑地址
                this.$axios.post('/addressedit', {
                    id: this.currentId, uid, status: isDefault, name, tel,
                    province, city, county,
                    addressDetail
                }).then(res => {
                    if (res.code === 200) {
                        this.$toast(res.msg);
                    }
                });
            }
            // 跳转到地址列表页面
            this.$router.push('/addressList');
        }
    },
}
</script>

<style>
#bdmap {
    height: 200px;
    border: 1px solid red;
}

.map {
    height: 200px;
}
</style>